
<style>
</style>

<style scoped>
</style>
<template>
  <baseMap ref="map" @ready="mapReady" :controls="controls" :base-map-layers="baseMapLayers">
  </baseMap>
</template>
<script>
import baseMap from './../../components/common-map/base-map'
import { baiduLayer } from './../../components/common-map/map-source'
import Heatmap from 'ol/layer/heatmap'
import VectorSource from 'ol/source/vector'
import GeoJSON from 'ol/format/geojson'
baiduLayer.setVisible(true)// 将图层设为显示
export default {
  name: 'home-map',
  data (vm) {
    return {
      // 地图控件
      controls: [],
      // 底图
      baseMapLayers: [
        // 百度黑蓝色底图
        baiduLayer
      ],
      vectorSource: {}
    }
  },
  computed: {
  },
  methods: {
    mapReady () {
      let _this = this
      _this.vectorSource = new VectorSource({
        // 使用湖泊数据模拟巡河数据
        // url: this.$HttpUtil.getBaseUrl() + '/static/json/lake.json',
        format: new GeoJSON({
          extractStyles: false
        }),
        // 重写加载器
        loader: function (extent, resolution, projection) {
          _this.$HttpUtil.get(`/api/inspection/lal-list`).then(json => {
            let f = _this.vectorSource.getFormat()
            // 解析器解析GeoJSON报文
            let features = f.readFeatures(json, { featureProjection: projection })

            f.readProjection(json)
            f.getLastExtent()
            _this.vectorSource.addFeatures(features)
          }).catch(e => {
            _this.vectorSource.removeLoadedExtent(extent)
          })
        }
      })
      let heatmap = new Heatmap({
        source: this.vectorSource,
        radius: 11,
        blur: 25
      })
      this.$refs['map'].mapObj.addLayer(heatmap)
    }
  },
  components: {
    baseMap
  },
  watch: {
  },
  mounted () {
  },
  props: [
  ]
}

</script>
